<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-10 17:04:11
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 11:16:33
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">
    <action-bar :options="navOptions" />
    <view class="page">
      <!-- 顶部自定义导航栏 -->
      <view class="header">
        <!-- 用户头像  -->
        <view class="header-noLogin" v-if="avatarUrl">
          <image class="avatar" :src="avatarUrl" mode="widthFix" />
          <view class="right">
            <span class="right-title">登录/注册</span>
            <span class="right-tips">点击登录享受更多精彩信息</span>
          </view>
        </view>

        <!-- 默认头像 -->
        <view class="header-login" v-else>
          <view class="defaultAvatar avatar" />
          <view>{{ userName }}</view>
        </view>
      </view>

      <view class="main" v-if="list.length > 0">
        <view class="bar" v-for="(bar, i) in list" :key="i" @click="toPage(bar.url)">
          <image :src="baseImgUrl + '/myZone/' + bar.icon + '.png'" mode="widthFix" />
          <view class="label">{{ bar.label }}</view>
          <view class="cuIcon-right" />
        </view>
      </view>

      <!-- <view class="foot1 bar"
          @click="toPage('changePassword')">
      <image :src="baseImgUrl+'/myZone/icon_changePassword.png'"
             mode="widthFix" />
      <view class="label">修改密码</view>

      <view class="cuIcon-right" />
    </view> -->
      <view class="bar" @click="navTo('/pages_workTableChild/evaluate/zoneStaff')" v-if="isShowPractice">
        <image :src="baseImgUrl + '/myZone/icon_changePassword.png'" mode="widthFix" />
        <view class="label">人员评价</view>
        <view class="cuIcon-right" />
      </view>

      <view class="bar" @click="navTo('/pages_workTableChild/evaluate/zoneInstitution')" v-if="isShowInstitution">
        <image :src="baseImgUrl + '/myZone/icon_changePassword.png'" mode="widthFix" />
        <view class="label">机构评价</view>
        <view class="cuIcon-right" />
      </view>

      <!-- <view class="bar" @click="btn_logOut()">
        <image :src="baseImgUrl + '/myZone/icon_changePassword.png'" mode="widthFix" />
        <view class="label">退出登录</view>

        <view class="cuIcon-right" />
      </view> -->
    </view>
  </view>
</template>
<script>
import { baseApiUrl, baseImgUrl } from "@/config.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      baseImgUrl: baseImgUrl,
      // 导航栏参数
      navOptions: {
        center: {
          title: "我的",
        },
      },
      list: [],
      /*
        label：标题
        icon：图标名
        url：页面链接
      */
      barData: [
        // { label: '个人信息', icon: 'icon_userInfo', url: 'userInfo' },
        { label: "工作场所", icon: "icon_workPlace", url: "siteList" },
        {
          label: "消防技术服务机构设备配备",
          icon: "icon_equipment",
          url: "equipment",
        },
        {
          label: "从业人员信息",
          icon: "icon_practitionersInfo",
          url: "staffInfo",
        },
        {
          label: "质量管理体系",
          icon: "icon_qualityManagement",
          url: "qualityAssurance",
        },
      ],
      elseBarData: [
        // { label: '个人信息', icon: 'icon_userInfo', url: 'userInfo' },
      ],

      isShowPractice: false, // 是否可以看到执业评价
      isShowInstitution: false, // 是否可以看到机构评价
    };
  },
  created() {
    // 获取用户角色
    const roles = this.userInfo.roles;
    // 管理员用户和培训机构用户
    if (roles && (roles[0] == "admin" || roles[0] == "mechanism")) {
      this.list = this.barData;
    } else {
      this.list = this.elseBarData;
    }
    if (roles && (roles.indexOf('technicalDirector') != -1 || roles.indexOf('staffPeople') != -1)) {
      this.isShowPractice = true
    }
    if (roles && roles.indexOf('socialunits') != -1) {
      this.isShowInstitution = true
    }
  },
  methods: {
    // 跳转页面
    toPage(url) {
      uni.navigateTo({
        url: "../../pages_myZoneChild/" + url,
      });
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    btn_logOut() {
      let that = this;
      // 获取缓存
      let list = this.$store.state.manage.online_list;
      if (list.length > 0) {
        uni.showModal({
          title: "提示",
          content:
            "在执业缓存中有未提交的数据，是否依旧退出账号？退出后数据将清空！",
          success: function (res) {
            if (res.confirm) {
              that.$store.commit("save_online_list", []);
              that.$store.commit("loginErr_logout");
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        // that.$store.commit('loginErr_logout')
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.login.userInfo,
    }),
    // 用户头像链接
    avatarUrl() {
      const url = this.$store.state.login.userInfo.avatar;
      if (url) {
        return baseApiUrl + url;
      } else {
        return false;
      }
    },

    // 用户名称
    userName() {
      return this.$store.state.login.userInfo.nickName;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.container_page {
  .page {
    min-height: calc(100vh - 80rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT !important;
  }

  .header {
    background-image: url('../../static/myZone/background.png');
    background-size: 100% 100%;
    width: 100%;
    height: 248rpx;
    padding: 40rpx 24rpx 0;


    &-noLogin {
      display: flex;
      flex-direction: row;

      .right {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        justify-content: space-around;

        &-title {
          font-size: 36rpx;
          color: #222222;
          line-height: 50rpx;
        }

        &-tips {
          font-weight: 400;
          font-size: 22rpx;
          color: #929292;
          line-height: 30rpx;
        }
      }
    }

    &-login {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background-color: white;
    }

    .defaultAvatar {
      background-image: url($uni-imgPrefix + "/myZone/icon_userInfo.png");
      background-size: 60%;
      background-position: 60% 55%;
      background-repeat: no-repeat;
      margin-right: 20rpx
    }
  }

  .main {
    margin: -20rpx 0 16rpx 0;
    padding: 10rpx 0;
    overflow: hidden;
    border-radius: 20rpx;
    font-size: #333;
    background-color: white;
  }

  .bar {
    font-size: 28rpx;
    padding: 26rpx 18rpx;
    display: flex;
    align-items: center;
    width: calc(100% - 40rpx);
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    background: white;

    image {
      width: 6%;
    }

    .label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 24rpx;
      flex: 1;
    }
  }
}
</style>
